UICollectionViewFlowLayout实现横向滑动

2023-06-03 09:43| 来源: 网络整理| 查看: 265

Swift - 自定义UICollectionViewFlowLayout实现横向滑动

最近要实现collection横向滑动功能，看了很多代码，但感觉功能不太齐全，基本只实现了基础设置，一旦要求其他分区控制item大小就不行了，现在补充下，希望能帮到大家。

要实现横向滑动功能，首先我们要了解FlowLayout的实现

如图：

在collectionView默认设置下row的显示是这样的(layout.scrollDirection = .vertical)，即竖向显示，上下拉动。通常情况下能满足我们大部分的业务需求，当我们需要做类似微信表情左右滑动功能，就不能用这个了。尝试设置属性layout.scrollDirection = .horizontal会出变成这样。如图：

并且按照分页滑动的时候回出现上页的边角，无法满足我们的需求。这时候我们就需要自定义FlowLayout，创建类WorkbenchCommonlyLayOut继承于UICollectionViewFlowLayout。

1、重写override func prepare() {}方法，这个方法主要用于计算控件布局。 2、重写func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {},这个方法主要用于返回rect中所有元素的布局属性 3、重新计算override var collectionViewContentSize: CGSize{ return CGSize(width: maxWidth, height: maxHeight) }如果不重新计算宽高，会出现最后一页显示不全的情况

下面上代码：(吐槽下：代码拷贝进来会自动出现**号，大家自动省略就行我实在是不想删了)

var cols : Int = 0 //列 // 重新计算上下间距 var rewriteminimumInteritemSpacing: CGFloat = 0 var rewriteminimumLineSpacing: CGFloat = 0 // 重新计算上下左右间距 var rewriteTop: CGFloat = 0 var rewriteBottom: CGFloat = 0 var rewriteLeft: CGFloat = 0 var rewriteRight: CGFloat = 0 fileprivate lazy var cellAttrs : [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]() fileprivate lazy var maxWidth : CGFloat = 0 fileprivate lazy var maxHeight: CGFloat = 0 **var** benchdelegate:WorkbenchCommonlyLayOutDelegate? // 重写布局 **override** **func** prepare() { **super**.prepare() // 直接设置layout的值 sectionInset.top = rewriteTop sectionInset.left = rewriteLeft sectionInset.right = rewriteRight sectionInset.bottom = rewriteBottom minimumInteritemSpacing = rewriteminimumInteritemSpacing minimumLineSpacing = rewriteminimumInteritemSpacing //0.计算item的宽度和高度 itemSize.width = ((collectionView?.bounds.width)! - sectionInset.left - sectionInset.right - minimumInteritemSpacing * CGFloat(cols - 1)) / CGFloat(cols) itemSize.height = ((collectionView?.bounds.height)! - sectionInset.top - sectionInset.bottom - minimumLineSpacing * CGFloat(rows - 1)) / CGFloat(rows) //1.获取一共多少个组 **let** sectionCount = collectionView!.numberOfSections //2.获取每个组中有多少个item **var** prePageCount : Int = 0 //页数 **for** i **in** 0.. CGSize **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat **func** collectionView(_ size: CGSize) } 复制代码

然后在func prepare()方法中调用代理（就是上面实现的代码，放在获取indexpath下面就行）

// 通过代理获取值 // 获取item值 itemSize = (benchdelegate?.collectionView(**self**.collectionView!, layout: **self**, sizeForItemAt: indexpath))! // 获取上下左右的UIEdgeInsets值 sectionInset = (benchdelegate?.collectionView(**self**.collectionView!, layout: **self**, insetForSectionAt: indexpath.section))! // 获取上下间距 minimumLineSpacing = (benchdelegate?.collectionView(**self**.collectionView!, layout: **self**, minimumLineSpacingForSectionAt: indexpath.section))! // 获取左右间距 minimumInteritemSpacing = (benchdelegate?.collectionView(**self**.collectionView!, layout: **self**, minimumInteritemSpacingForSectionAt: indexpath.section))! 复制代码

然后实现代理WorkbenchCommonlyLayOutDelegate

最后再运行一次：如图

截屏2021-10-20 下午6.22.33.png

截屏2021-10-20 下午6.22.46.png

截屏2021-10-20 下午6.22.53.png

上面设置了2个section

// 重写layoutdelegate **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { **if** indexPath.section == 1 { **return** CGSize(width: 50, height: 70) } **return** CGSize(width: CGFloat((Int(GK_SCREEN_WIDTH)-15*2-(5-1)*Int(rewriteminimumInteritemSpacing))/5), height: 70) } **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets { **return** UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15) } **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat { **return** rewriteminimumLineSpacing; } // 左右间距 **func** collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat { **return** rewriteminimumInteritemSpacing; } **func** collectionView(_ size: CGSize) { collectView.frame.size.height = size.height } 复制代码

小小的偷懒下，没有给行列做代理，有需求的话自己在WorkbenchCommonlyLayOutDelegate实现代理传入行列这样也能实现控制不同分区的行列。现在基本完成系统本身拥有的功能。有其他特殊需求的可以自行修改。

【本文地址】

公司简介

联系我们